/* ===================================== */
/* CSS for control sap.m/TabStripSelect  */
/* Base theme                            */
/* ===================================== */

/* ------------------------------ */
/* TabStripSelect commons styles  */
/* ------------------------------ */
html.sap-desktop, html.sap-tablet {
	.sapUiSizeCompact {
		.sapMSlt.sapMTSSlt {
			margin: 0;
			height: 100%;
			width: 1.5rem;
			.sapMSltInner {
				width: 1.25rem;
				height: 1.25rem;
				.sapMSltIcon {
					border-radius: 0.30em;
					font-size: 0.75rem;
					line-height: 0.75rem;
				}
				.sapUiIcon:before {
					position: relative;
					top: 0.2rem;
				}
			}
		}
	}
	.sapMSlt.sapMTSSlt {
		float: left;
		text-align: center;
		vertical-align: middle;
		position: relative;
		height: 100%;
		width: 2rem;
		padding: 0;
		margin: 0;
		&.sapMSltInvisible {
			visibility: hidden;
		}
		.sapMSltInner {
			position: relative;
			margin: 0 auto;
			width: 1.625rem;
			height: 1.625rem;
			z-index: 6; //higher than .sapMTabStrip .sapMTSLeftOverflowButtons
			.sapMSltIcon {
				border-radius: 0.15em;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				font-size: 1rem;
				padding: 0;
				line-height: 1.25rem;
			}
			.sapUiIcon:before {
				font-family: "SAP-icons";
				position: relative;
				top: 0.2rem;
				content: "\e1ef"; //down arrow
			}
		}
	}
}

.sapUiSizeCompact {
	.sapMSlt.sapMTSSlt {
		margin: 0;
		height: 100%;
		width: 1.5rem;
		.sapMSltInner {
			width: 1.25rem;
			height: 1.25rem;
			.sapMSltIcon {
				border-radius: 0.30em;
				font-size: 0.75rem;
				line-height: 0.75rem;
			}
			.sapUiIcon:before {
				position: relative;
				top: 0.2rem;
			}
		}
	}
}

html.sap-phone {
	.sapMSlt.sapMTSSlt {
		height: 3rem;
		width: 100%;
		margin: 0;
		padding: 0 0 0 1rem;
		text-align: left;
		box-shadow: none;
		.sapMSltLabel {
			line-height: 3rem;
			font-size: 0.875rem;
		}
		.sapMSltInner {
			margin: 0;
			position: static;
			height: 3rem;
			width: 100%;
			.sapUiIcon {
				right: 0;
				background: @sapUiFieldBackground;
				display: inline-block;
				padding: 0;
				font-size: inherit;
			}
			.sapUiIcon:before {
				font-family: "SAP-icons";
				position: relative;
				content: "\e1ef"; //down arrow
			}
		}
		span {
			width: 1.625rem;
			height: 1.625rem;
			line-height: 1.625rem;
			margin-top: 0.5rem;
			margin-right: 0.5rem;
			border-radius: 0.15rem;
		}
	}


	.sapMSltBar.sapMTSSltBar::after {
		float: right;
		height: 1.625rem;
		min-width: 1.625rem;
		width: 1.625rem;
		line-height: 1.625rem;
		border-radius: 0.175rem;
		font-family: "SAP-icons";
		speak: none;
		content: "\e1ef"; //down arrow
		text-align: center;
		margin-top: 0.5rem;
		margin-right: 0.4rem;
		font-size: 0.85rem;
	}
	
	.sapMSltBar {
		&.sapMTSSltBar {
			.sapMInputBaseInner {
				border: none;
				background: transparent;
			}
		}
	}
}

html[dir='rtl'].sap-phone .sapMSlt.sapMTSSlt {
	text-align: right;
}

.sapMTSScrollable .sapMTSSlt {
	visibility: visible;
}

.sapMSlt.sapMTSSlt {
	.sapMSltInner .sapMSltIcon {
		width: 2.375rem;
	}
}

html.sap-desktop, html.sap-tablet {
	.sapUiSizeCompact .sapMSlt.sapMTSSlt {
		width: inherit;
		height: 1.825rem;
		padding-top: 0.1875rem;
		padding-bottom: 0.1875rem;

		.sapMSltInner {
			height: 1.625rem;
			min-width: 2rem;
			text-shadow: none;
			.sapMSltIcon {
				border-radius: 0;
				line-height: 1.5rem;
				width: 1rem;
				font-size: 1rem;
				max-height: 1.5rem;
				margin-left: 0.4375rem;
				margin-right: 0.4375rem;
				&::before {
					top: 0;
				}
			}
		}
	}
	.sapMSlt.sapMTSSlt {
		height: 2.75rem;
		margin: 0;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		vertical-align: top;
		border: none;
		width: 2.5rem;

		&.sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) {
			background: none;
		}
		&.sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) .sapMSltInner {
			background-color: @sapUiButtonLiteActiveBackground;
			border-color: @sapUiButtonLiteActiveBorderColor;
			.sapMSltIcon {
				text-shadow: none;
				color: @sapUiButtonActiveTextColor;
			}
		}

		&:hover > .sapMSltHoverable {
			background-color: @sapUiButtonLiteHoverBackground;
			border-color: @sapUiButtonLiteHoverBorderColor;
			background-image: none;
		}

		.sapMSltInner {
		/*Taken from the sap.m transparent button*/
			vertical-align: top;
			-webkit-appearance: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-webkit-background-clip: padding-box;
			background-clip: padding-box;
			box-sizing: border-box;

			font-family: @sapUiFontFamily;
			font-size: 0.875rem;

			height: 2.500rem;
			width: 2.500rem;
			min-width: 1rem;
			margin: 0;
			padding: 0;
			text-align: center;
			position: relative;

			//sapMBtnInner
			background-color: @sapUiButtonBackground;
			border: 1px solid @sapUiButtonBorderColor;
			border-radius: 0.2rem;
			color: @sapUiButtonTextColor;
			text-shadow: @sapUiShadowText;

			//sapMTransparentBtn
			background-image: none;
			background-color: @sapUiButtonLiteBackground;
			border-color: @sapUiButtonLiteBorderColor;
			color: @sapUiButtonLiteTextColor;

			.sapMSltIcon {
				border-radius: 0;
				display: inline-block;
				font-size: 1.375rem;
				line-height: 2.375rem;
				text-align: center;
				margin: 0;
				padding: 0;
				vertical-align: top;
				max-height: 2.375rem;
			}
			.sapUiIcon::before {
				content: "\e1f2"; //overflow
			}
		}
	}
}

.sapMSlt.sapMTSSlt {
	border: none;
	background: transparent;
}

.sapMTSSlt.sapMSltPressed > .sapMSltInner {
	background-image: none;
	background-color: @sapUiButtonActiveBackground;
	border-color: @sapUiButtonActiveBorderColor;
	color: @sapUiButtonActiveTextColor;
	text-shadow: none;
}

html.sap-phone {
	.sapMSlt.sapMTSSlt {
		.sapMSltLabel {
			color: @sapUiListTextColor;
		}
		&.sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) {
			background: none;
		}
		&.sapMSltPressed.sapMSltIconOnly:not(.sapMSltDisabled) .sapMSltInner {
			background-color: transparent;
			background-image: none;
			color: inherit;
			.sapMSltIcon {
				text-shadow: none;
				color: @sapUiButtonActiveTextColor;
				background-color: @sapUiButtonLiteActiveBackground;
				border-color: @sapUiButtonLiteActiveBorderColor;
			}
		}

		&:hover > .sapMSltHoverable {
			background-color: @sapUiButtonLiteHoverBackground;
			border-color: @sapUiButtonLiteHoverBorderColor;
			background-image: none;
		}
		.sapMSltInner {
			height: 3rem;
			.sapMSltIcon {
				height: 2.5rem;
				margin-top: 0.25rem;
				background: inherit;
				font-size: 1.375rem;
			}
			.sapUiIcon:before {
				font-family: "SAP-icons";
				position: relative;
				content: "\e1f2"; //overflow
				line-height: 3rem;
			}
		}
	}

	.sapMSltBar {
		&.sapMTSSltBar::after {
			content: "\e1f2"; //overflow
			float: right;
			height: 2.5rem;
			line-height: 2.5rem;
			width: 2.375rem;
			margin-right: 0.5rem;
			margin-top: 0.25rem;
			margin-bottom: 0px;
			margin-left: 0px;
			vertical-align: top;
			font-size: 1.375rem;
			background: @sapUiButtonLiteActiveBackground;
			color: @sapUiButtonActiveTextColor;
			text-shadow: none;
			border: @sapUiButtonLiteActiveBorderColor;
		}
	}

	.sapMSltBar {
		&.sapMTSSltBar {
			background: @sapUiPageHeaderBackground;
			box-shadow: inset 0 -0.125rem 0 0 @sapUiPageHeaderBorderColor;
			border: none;
		}
	}

	.sapMTabStripSelectList > .sapMSelectListItemBase {
		font-size: @sapMFontMediumSize;
	}
	
	.sapMTabStripSelectList .sapMSelectListItemBasePressed .sapMTabStripSelectListItemCloseBtn .sapUiIcon {
		color: @sapUiListActiveTextColor;
	}

	.sapMSltPicker {
		.sapMTabStripSelectList .sapMSelectListItemBase {
			padding-right: 0.20rem;
			.sapMTabStripSelectListItemCloseBtn {
				width: 3rem;
			}
		}
		.sapMTabStripSelectListItemCloseBtn .sapMBtnIcon {
			font-size: 1rem;
		}
	}
}